<template>
    <!-- 组件的结构，必须要在外面套一层根标签div（template最终是不会呈现在页面上的） -->
    <!-- 这里，之前的html怎么写，这里就怎么写 -->
    <div class="demo">
        <h2>学校名称：{{ name }}</h2>
        <h2>学校地址：{{ address }}</h2>
        <button @click="showName">点我提示学校名</button>	
    </div>
</template>

<script>
    // 组件的交互相关的代码（数据、方法）（js）
    // 之前数据怎么写，这里就怎么写
    export default {
        // 配置在vue开发者工具中的名字
        // 尽量和文件名保持一致
        name: 'School',
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        },
        methods: {
            showName() {
                alert(this.name);
            }
        } 
    }
</script>

<style >
    /* 组件的样式 */
    /* 和在html中的写法是一样的 */
    .demo {
        background-color: aqua;
    }
</style>


